$(function () {

  const input_search = $('#input_search')
  const btn_search = $('#btn_search')
  const input_image = $('#input_image')
  const selectmovietitle = $('#selectmovietitle')
  let timer = null;
  input_image.css('display', 'none')

  input_search.on('input', function () {
    var key = this.value;
    // 如果输入框中无内容
    if (key.trim().length == 0) {
      // 将提示下拉框隐藏掉
      input_image.css('display', 'block')

      // 阻止向下运行
      return;
    }

    timer = setTimeout(function () {
      // 清除上一次开启的定时器
      clearTimeout(timer);
      // 向服务器端发送请求
      
      $.ajax({
        type: 'get',
        url: 'http://localhost:3000/index/imagesearch',
        async: true,
        data: {
          mname: key
        },
        success: function (result) {
          let str = ''
          for (const i of result.data) {
            str = str + 
            `<li class="">
              <a id="selectmovie" href="" >
                <img src="${i.mimage}"/>
                <div>
                  <span class="sp_title">${i.mname}</span>
                  <span class="sp_date">${i.mshowdate}</span>
                  <p>${i.mcountry} / ${i.mlanguage}</p>
                </div>
              </a>
            </li>`
          }
          
          input_image.html(str)
          input_image.css('display', 'block')
        }
      })
    }, 500)

  })
  input_search.on('blur', function () {
    // console.log('1111');
    input_image.css('display', 'none')
    // input_search.val('')
  })
  selectmovietitle.on('click', function() {
    console.log('select');
  })
})